<template>
	<!-- 房屋信息 -->
	<view>
		<view class="head">
			<video class="video" id="myVideo"
				src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
				@error="videoErrorCallback" enable-danmu danmu-btn controls></video>
		</view>
		<view class="main">
			<view class="title in">
				新上架！东五小区 豪华装修 家电全送 拎包入住
				<view class="time">
					2021年3月1日上架
				</view>
			</view>
			<view class="price in">
				2300元/月
				<view class="span">
					租金
				</view>
			</view>
			<view class="row1 in">
				<view class="list">
					<!-- 钱 -->
					<view class=" txt">
						2室2厅2卫
					</view>
					<view class=" span">
						户型
					</view>
				</view>
				<view class="list">
					<!-- 钱 -->
					<view class=" txt">
						118.2㎡
					</view>
					<view class=" span">
						面积
					</view>
				</view>
				<view class="list">
					<!-- 钱 -->
					<view class=" txt">
						共18层
					</view>
					<view class=" span">
						楼层
					</view>
				</view>
				<view class="list">
					<!-- 钱 -->
					<view class=" txt">
						南
					</view>
					<view class=" span">
						朝向
					</view>
				</view>
			</view>
			<!-- 标签 -->
			<view class="tag in">
				<view>
					电梯
				</view>
				<view>
					满二
				</view>
			</view>

			<!-- 附件配套 -->
			<view class="row2 in">
				<view class="list">
					<view class="left">
						楼层
					</view>
					<view class="right">
						中楼层（共18层）
					</view>
				</view>
				<view class="list">
					<view class="left">
						朝向
					</view>
					<view class="right">
						西南
					</view>
				</view>
				<view class="list">
					<view class="left">
						装修
					</view>
					<view class="right">
						精致
					</view>
				</view>
				<view class="list">
					<view class="left">
						类型
					</view>
					<view class="right">
						民用住宅
					</view>
				</view>
			</view>
			<!-- 线 -->
			<view class="line ">

			</view>
			<!-- 房源亮点 -->
			<view class="row3 ">
				<view class="title1 in">
					房屋介绍
				</view>
				<view class="text in">
					地理位置:晶都国际处于酒仙桥中心地带，毗邻北京三大商圈,紧邻丽都商圈,隔四环与望京商圈相望，西南紧挨燕莎商圈,地理位置优越。
					周边配套:颐堤港商业中心，兆维大厦...
				</view>
				<!-- 线 -->
				<view class="line">

				</view>
				<view class="title1 in">
					看房记录
				</view>
				<view class="text in">
					近一个月新增2位看房客户，共50位
				</view>
			</view>
			<!-- 线 -->
			<view class="line">

			</view>
			<view class="row9 in">
				<view class="title1">
					小区·东五小区
				</view>
				<view class="image">
					<image class="img" src="../../static/shop/1595833524878383141.jpg" mode=""></image>
				</view>
			</view>
			<!-- 线 -->
			<view class="line">
			</view>
			<!-- 周边配套 -->
			<view class="row5 in">
				<view class="title1">
					周边配套
				</view>
				<view class="lists">
					<view class="list">
						<view class="left">
							地铁
						</view>
						<view class="right">
							离西二旗地铁站500米
						</view>
					</view>
				</view>
				<!--  -->
				<scroll-view scroll-x="true">
					<view class="item1">
						<image class="img" src="../../static/shop/1595657049599668876.jpg" mode=""></image>
					</view>
					<view class="item1">
						<image class="img" src="../../static/shop/1595657049599668876.jpg" mode=""></image>
					</view>
					<view class="item1">
						<image class="img" src="../../static/shop/1595657049599668876.jpg" mode=""></image>
					</view>
					<view class="item1">
						<image class="img" src="../../static/shop/1595657049599668876.jpg" mode=""></image>
					</view>
					<view class="item1">
						<image class="img" src="../../static/shop/1595657049599668876.jpg" mode=""></image>
					</view>
				</scroll-view>

			</view>
			<!-- 周边配套 end -->
			<!-- 线 -->
			<view class="line">
			</view>
			<!-- 整体规划 -->
			<view class="row6 in">
				<view class="title1">
					整体规划
				</view>
				<view class="li">
					<view class="text">
						· 杭州、无锡出台楼市调控政策 热点城市...锡出台楼市调控政策 锡出台楼市调控政策
					</view>
					<view class="icon">
						<image class="img" src="../../static/icon/iconRight.png" mode=""></image>
					</view>
				</view>
				<!-- 轮播 -->

				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item class="swiper-item">
						<image class="img" src="../../static/shop/1595833354066324005.jpg" mode=""></image>
					</swiper-item>
					<swiper-item class="swiper-item">
						<image class="img" src="../../static/shop/1595833354066324005.jpg" mode=""></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 整体规划 end-->

			<!-- 线 -->
			<view class="line">
			</view>
			<!-- VCR -->
			<view class="row7 in">
				<view class="title1">
					VCR
				</view>
				<video class="video" id="myVideo"
					src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
					@error="videoErrorCallback" enable-danmu danmu-btn controls></video>
			</view>
			<!-- VCR end-->
			<!-- 线 -->
			<view class="line">
			</view>
			<!-- 对口学校 -->
			<view class="row8 in">
				<view class="title1">
					对口学校
					<view class="txt">
						更多
						<view class="icon">
							<image class="img" src="../../static/icon/iconRight.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="lists">
					<view class="list">
						<view class="left">
							学校名称
						</view>
						<view class="right">
							上海第二实验小学
						</view>
					</view>
					<view class="list">
						<view class="left">
							升学方式
						</view>
						<view class="right">
							直升
						</view>
					</view>
					<view class="list">
						<view class="left">
							对口中学
						</view>
						<view class="right">
							上海第二实验中学
						</view>
					</view>
					<view class="list">
						<view class="left">
							划片小区
						</view>
						<view class="right">
							三个划片小区，150套房源在售
						</view>
					</view>
				</view>
			</view>
			<!-- 对口学校 end-->
			<!-- 线 -->
			<view class="line">
			</view>
			<!-- 小区标题-->
			<view class="row4 in">
				<view class="state">
					<view class="image">
						<image class="img" src="../../static/shop/1595657049599668876.jpg" mode=""></image>
					</view>
					<view class="name">
						<view class="txt1">
							张三
						</view>
						<view class="txt2">
							已实名
						</view>
					</view>
					<view class="txt">
						查看详情
						<view class="icon">
							<image class="img" src="../../static/Estate/icon-1.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="text">
					<text>
						TA的评价
					</text>
					<view class="txt">
						全部1条
						<view class="icon">
							<image class="img" src="../../static/Estate/icon-1.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 小区标题 end-->
			<!-- 线 -->
			<view class="line">
			</view>
			<!-- 推荐房源 -->
			<view class="row10 in">
				<view class="title1">
					附件房源
				</view>
				<view class="list">
					<house-list></house-list>
				</view>
			</view>
			<!-- 推荐房源 end-->
		</view>
		<!-- 底部 -->
		<view class="footer">
			<view class="left">
				<view class="image">
					<image class="img" src="../../static/icon/icon3.png" mode=""></image>
				</view>
				<view class="name">
					<view class="txt1">
						张三
					</view>
					<view class="txt2">
						已实名
					</view>
				</view>
			</view>

			<view class="right">
				<view class="image1">
					<image class="img" src="../../static/Estate/icon3.png" mode=""></image>
				</view>
				<view class="txt">
					打电话
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: ''
			};
		},
		methods: {
			scrollTop(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss">
	.head {
		width: 100%;

		.video {
			width: 100%;
		}

	}

	.video {
		width: 100%;
	}

	.in {
		width: 90%;
		margin: auto;
	}

	.line {
		width: 750rpx;
		background-color: #F2F2F2;
		height: 10rpx;
	}

	.lists {
		margin: 30rpx 0;

		.list {
			display: flex;

			.left {
				color: #B3B3B3;
				margin-right: 50rpx;
			}
		}
	}

	.main {

		width: 100%;

		.title {
			font-size: 40rpx;
			font-weight: 600;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
		}

		.price {
			color: #E63308;
			font-size: 44rpx;
			display: flex;
			padding: 20rpx 0;

			.span {
				color: #A8A8A8;
				font-size: 28rpx;
				margin-top: 20rpx;
				margin-left: 10rpx;
			}
		}

		.time {
			margin-top: 20rpx;
			color: #A8A8A8;
			font-size: 22rpx;
			float: right;
		}

		.row1 {
			width: 90%;
			margin: auto;
			display: flex;
			justify-content: space-between;

			.list {
				text-align: center;
			}

			.txt {
				font-size: 36rpx;
			}

			.span {
				font-size: 28rpx;
				color: #A8A8A8;
				margin: 20rpx 0;
			}
		}

		// 标签
		.tag {
			display: flex;
			flex-wrap: wrap;

			view {
				font-size: 22rpx;
				border: 2rpx solid #BBBBBB;
				padding: 0rpx 10rpx;
				margin-right: 15rpx;
				margin-bottom: 10rpx;
			}
		}

		// 
		.row2 {
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx 0;

			.list {
				width: 50%;
				display: flex;
				font-size: 28rpx;
				margin: 2rpx 0;

				.left {
					width: 20%;
					margin-right: 20rpx;
					color: #B3B3B3;
				}

				.right {
					width: 80%;
				}
			}
		}

		.title1 {
			color: #FB9C00;
			font-size: 40rpx;
			padding-top: 20rpx;
		}

		.row3 {
			padding-bottom: 30rpx;

			.text {
				margin: 20rpx auto;
			}

		}

		.more {
			width: 100%;
			height: 100rpx;
			margin: auto;
			text-align: center;

			.img1 {
				width: 25rpx;
				height: 15rpx;
				margin-right: 20rpx;
			}

			.text {
				color: #A2A2A2;
			}
		}

		.row4 {

			.state {
				margin: 30rpx ;
				display: flex;
				
				.txt {
					margin-left: 290rpx;
					margin-top: 15rpx;
					font-size: 24rpx;
					color: #284CCC;
					display: flex;
				
					.icon {
						margin-left: 20rpx;
						width: 15rpx;
						height: 20rpx;
					}
				}
				.name{
					font-size: 20rpx;
					margin-left: 30rpx;
					.txt1{
						font-size: 28rpx;
						font-weight: 550;
					}
					.txt2{
						color: #999;
					}
				}
			}
			.text{
				margin: 30rpx ;
				display: flex;
				justify-content: space-between;
				height: 50rpx;
				.txt {
					
					font-size: 24rpx;
					color: #284CCC;
					display: flex;
				
					.icon {
						margin-left: 20rpx;
						width: 15rpx;
						height: 20rpx;
					}
				}
			}
			.image {
				width: 100rpx;
				height: 100rpx;
			}


		}

		.row5 {



			scroll-view {
				width: 100%;
				white-space: nowrap;
				height: 180rpx;
			}

			.item1 {
				display: inline-block;
				margin: 10rpx;
				width: 180rpx;
				height: 140rpx;
			}
		}

		.row6 {
			$height: 50rpx;
			padding: 20rpx 0;

			.li {
				display: flex;
				justify-content: space-between;
				height: $height;
				margin: 10rpx;

				.text {
					font-size: 28rpx;
					font-weight: normal;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					line-height: $height;
				}

				.icon {
					margin-left: 100rpx;
					line-height: $height;
					width: 15rpx;
					height: 20rpx;
				}

				swiper {
					width: 100%;
					height: 280rpx;
				}

				.swiper-item {
					width: 750rpx;
					height: 280rpx;
				}
			}
		}

		.row7 {
			padding: 20rpx 0;

			.video {
				margin-top: 30rpx;
			}
		}

		.row8 {
			padding: 20rpx 0;

			.title1 {
				.txt {
					margin-top: 15rpx;
					float: right;
					font-size: 28rpx;
					color: #A2A2A2;
					display: flex;

					.icon {
						margin-left: 20rpx;
						width: 15rpx;
						height: 20rpx;
					}
				}
			}

		}

		.row9 {
			padding: 20rpx 0;

			.image {
				margin-top: 30rpx;
				width: 100%;
				height: 300rpx;
			}
		}

		.row10 {
			.list {
				margin: 30rpx 0;
			}
		}
	}

	.footer {

		display: flex;
		justify-content: space-around;
		box-shadow: 0 0 10rpx #999;
		padding: 10rpx 0;

		.left {
			display: flex;

			.image {
				width: 60rpx;
				height: 60rpx;
			}

			.name {
				margin-left: 10rpx;
				font-size: 24rpx;
				.txt1{
					font-weight:700;
				}
				.txt2{
					color: #999;
				}
			}
		}

		.right {
			display: flex;

			.image1 {
				width: 50rpx;
				height: 50rpx;
			}

			.txt {
				width: 190rpx;
				height: 50rpx;
				text-align: center;
				line-height: 50rpx;
				border-radius: 10rpx;
				font-size: 28rpx;
				margin-left: 20rpx;
				background-color: #FFC45B;
				color: #fff;
			}
		}
	}
</style>
